iT邦幫忙

2023 iThome 鐵人賽

DAY 6
0
自我挑戰組

Django 初學入門 - 從 ROR 的角度來學習 Django系列 第 6

DAY3 - Django templates 和 側邊欄

  • 分享至 

  • xImage
  •  

第一個 templates

我們昨天是直接在 def index 渲染特定文字,但是如果今天我們今天不只想要一段文字,我們想要渲染更多的資訊,肯定是需要一個檔案,讓我們要呈現的文字寫在裡面。
因此接下來我們就來新增這個檔案,也就是 MVT 架構中的 T


Django 的 templates 就是 ROR 的 View 資料夾


修改 views.py 資訊

  • 首先我們先指定要渲染的檔案,照下面設定後,Django 就會指定 index 這個方法,對應渲染 online/templates/index.html 這個檔案的資料
# online/views.py

def index(request):
    return render(request, "index.html")

新增 templates 檔案

如果看不懂上面那一段意思的話,沒關係,當你改好 views.py 後,我們打開瀏覽器,並且輸入 http://127.0.0.1:8000/online/,上面的資訊是顯示 TemplateDoesNotExist at /online/,意思就是我們剛剛已經指定渲染某個檔案,不過現在還沒設定。

如下圖:
https://ithelp.ithome.com.tw/upload/images/20230917/201623654kOUOW9YhY.png

因此我們來新增它 store => online => templates => index.html

Ps. 要記得先新增一個 templates 資料夾,並且在此資料夾裡面新增 index.html 檔案

<!-- store/online/templates/index.html -->

我們成功新增了 index.html 的頁面
  • 此時我們先重新啟動 server,並且再打開瀏覽器畫面,會看到以下畫面,就代表成功了
    https://ithelp.ithome.com.tw/upload/images/20230917/20162365tx5q6OojYH.png

在 ROR 中,你不必特別去指定要渲染哪一個畫面檔案,因為 ROR 慣例的關係,照著慣例寫就可以渲染出你要的 view,Django 也是有用慣例的寫法,後面會提到


側邊欄(sidebar)

我們剛剛已經新增好了 index.html 檔案,不過我現在想要在這個檔案上加上一個網站通常都會有的 sidebar 或者是 header,讓使用者逛我們的網站時會有良好的體驗,因此我們現在來新增 sidebar

新增 sidebar 檔案

  • 在跟 index.html 同層級的位子,新增 sidebar.html 檔案 -> 路徑是這樣 store/online/templates/sidebar.html
<!-- store/online/templates/sidebar.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    {% block title %}
      <title>Online Store</title>
    {% endblock %}
  </head>
  <body>
    {% block sidebar %}
      <!-- insert default navigation text for every page -->
      我是側邊欄 ||
    {% endblock %}
    {% block content %}
      <!-- default content text (typically empty) -->
    {% endblock %}
  </body>
</html>

上面有幾個看不懂的語法,沒關係,下面會一個一個解釋

介紹 block 語法

  • block 的意思就是,這個區塊內的東西 寫在這邊是預設會顯示的,如果我們等等在別的檔案,引用了 sidebar.html 檔案,使用 block 語法 並且在之中加上別的內容,該頁面的 block 就會顯示不同的內容

這一段話非常饒口,因此我們直接來看範例好了,照著以下步驟:

  1. 首先在 index.html 這個檔案,新增一段 {% extends 'sidebar.html' %},這一段的意思是,我要在此渲染頁面,引入 sidebar.html 檔案
<!-- store/online/templates/index.html -->
{% extends 'sidebar.html' %}

我們成功新增了 index.html 的頁面

此時你開瀏覽器看到的畫面應該是這樣:
https://ithelp.ithome.com.tw/upload/images/20230917/20162365J878yU5RyF.png

這時應該會很好奇,我的 index.html 檔案裡面明明還有另外一段文字,為什麼他沒有顯示,只有顯示我在 sidebar.html 寫的那一段文字(我是側邊欄 ||)。

  1. 再來我們這樣修改,一樣是 index.html 檔案,我們加上 block
<!-- store/online/templates/index.html -->
{% extends 'sidebar.html' %}

{% block content %}
我們成功新增了 index.html 的頁面
{% endblock %}

此時再開瀏覽器,會發現變成這樣:

https://ithelp.ithome.com.tw/upload/images/20230917/20162365iroKvAR0qM.png

index.html 的文字跑出來了

因此這樣應該就比較了解 block 的功用,簡單就是說,當你使用 extends 的方法引入檔案時,如果在 sidebar.html 檔案那邊,有使用 block 的方法包住一段內容,該段內容就會以 block 內容為主,如果你不想要用 sidebar.html 的內容,你可以直接在 index.html 檔案使用 block 方法,這樣就可以使用自己index.html 檔案內的內容

總結

今天學到哪些東西呢?

  1. Django 怎麼創建 templates
  2. 如何創建 sidebar or header
  3. extendsblock 的用法

最後附上 Github: https://github.com/eagle0526/Django-store


上一篇
DAY5 - Django 的 Hello World
下一篇
DAY7 - Django CSS 和 CDN 設定
系列文
Django 初學入門 - 從 ROR 的角度來學習 Django30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言